<template>
	<view class="contain">
		<!-- 搜索框 -->
		<view class="searchInput">
			<image class="search_icon" src="https://img-blog.csdnimg.cn/20210316161109714.png"></image>
			<input placeholder="搜索老师"/>
		</view>

		<!-- 老师信息 -->
		<view class="teacher_info" v-for="(item, index) in teacherList" :key="index">
			<image mode="heightFix" :src="item.avatarUrl"></image>
			<view class="teacher_detail">
				<view>{{item.realName}}</view>
			</view>
			<button class="teacher_btn" @click="managementWage(item)">管理教师课酬</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teacherList: [{
						index: 0,
						name: '熊斌',
						class: '钢琴初级一班',
						avatar: '../../static/teacher1.png'
					},
					{
						index: 1,
						name: '徐馨',
						class: '吉他初级一班',
						avatar: '../../static/teacher2.png'
					},
					{
						index: 2,
						name: '叶明',
						class: '声乐初级二班',
						avatar: '../../static/teacher3.png'
					},
					{
						index: 3,
						name: '李勇',
						class: '古筝高级二班',
						avatar: '../../static/teacher4.png'
					},
					{
						index: 4,
						name: '崔敏',
						class: '架子鼓初级二班',
						avatar: '../../static/teacher3.png'
					},
					{
						index: 5,
						name: '林海',
						class: '吉他高级一班',
						avatar: '../../static/teacher4.png'
					},
					{
						index: 6,
						name: '郑强',
						class: '架子鼓初级一班',
						avatar: '../../static/teacher1.png'
					},
					{
						index: 7,
						name: '吴薇',
						class: '钢琴高级一班',
						avatar: '../../static/teacher2.png'
					}
				],
			}
		},
		onLoad(e) {
			// 获取所有老师
			if(e.teacherList) this.getTeacher(e.teacherList);
		},
		methods: {
			getTeacher: function(item) {
				this.teacherList = JSON.parse(item);
			},
			managementWage: function(item) {
				uni.navigateTo({
					url: '../teacherWage/teacherWage?info=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F3F5F7;
	}
	.contain{
		margin: 10rpx 30rpx;
	}
	.searchInput{
		background-color: #fff;
		/* width: 400rpx; */
		height: 80rpx;
		margin-bottom: 30rpx;
		border-radius: 40rpx;
		display: flex;
		padding-left: 30rpx;
		align-items: center;
	}
	.search_icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
	.teacher_info{
		background-color: #fff;
		padding: 20rpx;
		/* border-radius: 24rpx; */
		display: flex;
		align-items: center;
		margin: 20rpx 0rpx;
	}
	.teacher_info image{
		height: 100rpx;
		margin-right: 30rpx;
	}
	.teacher_detail image{
		height: 35rpx;
		margin: 10rpx 5rpx;
	}
	.teacher_btn{
		background-color: #FD973F;
		color: #fff;
		font-size: 26rpx;
		border-radius: 16rpx;
		height: 58rpx;
		margin-right: 0;
		line-height: 50rpx;
	}
</style>
